<template>
  <div class="goods dpflex">
    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item title="迷你早餐" />
        <van-sidebar-item title="（冒菜）套餐专区" />
        <van-sidebar-item title="撸烤串" />
        <van-sidebar-item title="满减专区" />
        <van-sidebar-item title="营养适配" />
        <van-sidebar-item title="千万销量" />
        <van-sidebar-item title="炒饭系列" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
        <van-sidebar-item title="主食" />
      </van-sidebar>
    </div>
    <div class="right flex1">
      <van-notice-bar class="tite" :scrollable="false" text="迷你早餐" />
      <van-card
        origin-price="99.40"
        price="93.9"
        desc="特惠"
        title="荤素双人餐（配米饭两份+饮品两份）"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">月售68份</van-tag>
          <van-tag plain type="danger">好感度100%</van-tag>
        </template>
        <template #footer>
          <van-stepper
            default-value="0"
            theme="round"
            button-size="22"
            disable-input
            min="0"
          />
        </template>
      </van-card>
      <van-notice-bar class="tite" :scrollable="false" text="迷你早餐" />
      <van-card
        origin-price="99.40"
        price="93.9"
        desc="特惠"
        title="荤素双人餐（配米饭两份+饮品两份）"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">月售68份</van-tag>
          <van-tag plain type="danger">好感度100%</van-tag>
        </template>
        <template #footer>
          <van-stepper
            default-value="0"
            theme="round"
            button-size="22"
            disable-input
            min="0"
          />
        </template>
      </van-card>
      <van-notice-bar class="tite" :scrollable="false" text="迷你早餐" />
      <van-card
        origin-price="99.40"
        price="93.9"
        desc="特惠"
        title="荤素双人餐（配米饭两份+饮品两份）"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">月售68份</van-tag>
          <van-tag plain type="danger">好感度100%</van-tag>
        </template>
        <template #footer>
          <van-stepper
            default-value="0"
            theme="round"
            button-size="22"
            disable-input
            min="0"
          />
        </template>
      </van-card>
      <van-notice-bar class="tite" :scrollable="false" text="迷你早餐" />
      <van-card
        origin-price="99.40"
        price="93.9"
        desc="特惠"
        title="荤素双人餐（配米饭两份+饮品两份）"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">月售68份</van-tag>
          <van-tag plain type="danger">好感度100%</van-tag>
        </template>
        <template #footer>
          <van-stepper
            default-value="0"
            theme="round"
            button-size="22"
            disable-input
            min="0"
          />
        </template>
      </van-card>
      <van-notice-bar class="tite" :scrollable="false" text="迷你早餐" />
      <van-card
        origin-price="99.40"
        price="93.9"
        desc="特惠"
        title="荤素双人餐（配米饭两份+饮品两份）"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">月售68份</van-tag>
          <van-tag plain type="danger">好感度100%</van-tag>
        </template>
        <template #footer>
          <van-stepper
            default-value="0"
            theme="round"
            button-size="22"
            disable-input
            min="0"
          />
        </template>
      </van-card>
      <van-notice-bar class="tite" :scrollable="false" text="迷你早餐" />
      <van-card
        origin-price="99.40"
        price="93.9"
        desc="特惠"
        title="荤素双人餐（配米饭两份+饮品两份）"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">月售68份</van-tag>
          <van-tag plain type="danger">好感度100%</van-tag>
        </template>
        <template #footer>
          <van-stepper
            default-value="0"
            theme="round"
            button-size="22"
            disable-input
            min="0"
          />
        </template>
      </van-card>
      <van-notice-bar class="tite" :scrollable="false" text="迷你早餐" />
      <van-card
        origin-price="99.40"
        price="93.9"
        desc="特惠"
        title="荤素双人餐（配米饭两份+饮品两份）"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">月售68份</van-tag>
          <van-tag plain type="danger">好感度100%</van-tag>
        </template>
        <template #footer>
          <van-stepper
            default-value="0"
            theme="round"
            button-size="22"
            disable-input
            min="0"
          />
        </template>
      </van-card>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Goods extends Vue {
  activeKey = 0;
}
</script>

<style scoped lang="less">
.goods {
  width: 100%;
  height: 100%;
}
.left {
  width: 25%;
  height: 100%;
  overflow-y: scroll;
  p {
    height: 30px;
  }
}
.right {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}
.van-card:not(:first-child) {
  margin: 0 !important;
}
.tite {
  background: #f4f4f4 !important;
  color: #5b5b5b;
}
</style>
